<template>
  <div>
    <el-form-item label="数据点">
      <template>
        <el-select v-model="params.model" @change="paramsChange" placeholder="请选择">
          <el-option
            v-for="item in modelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <span class="start">第</span>
        <el-select style="width:80px" v-model="params.day">
          <el-option
            v-for="item in dayOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <span class="end">日</span>
        <span class="start">第</span>
        <el-select style="width:80px" v-model="params.time">
          <el-option
            v-for="item in timeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <span class="end">点</span>
      </template>
    </el-form-item>
  </div>
</template>

<script>
export default {
  props: ['config'],
  data() {
    return {
      params: {},
      modelOptions: [
        { label: '固定时间', value: '固定时间' },
        { label: '最大值', value: '最大值' },
        { label: '平均值', value: '平均值' }
      ],
      dayOptions: [
        { label: '1', value: '1' },
        { label: '2', value: '2' },
        { label: '3', value: '3' }
      ],
      timeOptions: [
        { label: '1', value: '1' },
        { label: '2', value: '2' },
        { label: '3', value: '3' }
      ]
    }
  },
  methods: {
    paramsChange(val) {
      // this.config.handleChange(val)
      console.log(this.params)
    }
  }
}
</script>

<style lang="scss" scoped>
.start{
  display: inline-block;
  margin: 0 12px 0 24px;
}
.end{
  display: inline-block;
  margin: 0 0px 0 12px;
}
</style>
